<template>
  <div @click="$emit('setCount')">Child {{ count }} {{ person.name }}</div>
</template>

<!-- <script lang="ts">
export default {
  name: "Child",
};
</script> -->

<script lang="ts" setup>
import { PropType } from "vue";
import type { Person } from "./index.d";

// 定义选项式API的内容
defineOptions({
  name: "Child",
});

// defineProps 可以直接使用
// defineProps({
//   count: {
//     type: Number,
//     required: true,
//   },
//   person: {
//     type: Object,
//     required: true,
//   },
// });

const props = defineProps({
  count: {
    type: Number,
    default: 10,
  },
  person: {
    type: Object as PropType<Person>,
    required: true,
  },
});

console.log(props);

// 声明接受自定义事件
const emit = defineEmits(["setCount"]);
// emit("setCount"); // 触发自定义事件

// defineProps<{
//   count?: number;
//   person: {
//     name: string;
//   };
// }>();

// 如果希望加上默认值
// const props = withDefaults(
//   defineProps<{
//     count?: number;
//     person: {
//       name: string;
//     };
//   }>(),
//   {
//     count: 10,
//   }
// );
</script>

<style></style>
